<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>邀请有礼</title>
    <link rel="stylesheet" href="css/inviteBonus.css">
    <script>
        // 屏幕自适应
        function calculateSize () {
            var clientWidth = window.innerWidth || document.documentElement.clientWidth;
            if(clientWidth >= 640){
                clientWidth = 640;
            }
            var htmlSize = clientWidth/7.5;
            document.documentElement.style.fontSize = htmlSize + 'px';
        };
        calculateSize();
        window.addEventListener('resize', calculateSize);
    </script>
</head>
<body>
    <div id="app">
        <!-- 开始页面 -->
        <div id="startPage">
            <div id="startBanner"></div>
            <div id="startBtn"></div>
            <div class="linkBox">
                <div class="linkItem">我的奖品</div>
                <div class="linkItem">活动规则</div>
            </div>
        </div>

        <!-- 游戏说明页 -->
        <div id="gameTips" style="display:none;">
            <div id="iKnowBtn"></div>
        </div>

        <!-- 游戏页 -->
        <div id="gamePage">
            <div id="timer"><span id="timeCounter">30</span></div>
            <div id="counter">8</div>
            <div id="guostArea"></div>
        </div>

        <!-- 失败页 -->
        <div id="failPage" style="display:none;">
            <div id="failbox">
                <div id="failwords">您邀请了<span id="failNum" style="color:#4f4783;"></span>位行人<br>还差<span id="differNum"></span>只才能成功进入宴厅抽奖</div>
                <div class="btn failAgain tryAgain"></div>
                <div class="btn failfriend"></div>
            </div>
            <div class="fff">
                <div class="linkItem">我的奖品</div>
                <div class="linkItem">活动规则</div>
            </div>
        </div>

        <!-- 成功 -->
        <div id="sucessPage" style="display:none;">
            <div id="successbox">
                <div id="successwords">你邀请了<span id="sucessNum" style="color:#4f4783;"></span>位行人，成功进入宴厅<br><span>（获得一次抽奖机会）</span></div>
                <div class="btn lottery"></div>
                <div class="btn again tryAgain"></div>
                <div class="btn friend"></div>
            </div>
            <div class="fff">
                <div class="linkItem">我的奖品</div>
                <div class="linkItem">活动规则</div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/inviteBonus.js"></script>
</body>
</html>